<template>
  <div class="body">
    <!--    <div class="xz">-->
    <!--      <div class="xz-1">-->
    <!--        <div class="xz-1-t"></div>-->
    <!--        <div class="item2"></div>-->
    <!--        <div class="xz-1-b"></div>-->
    <!--      </div>-->
    <!--      <div class="xz-2">-->
    <!--        <div class="xz-2-t"></div>-->
    <!--        <div class="item2"></div>-->
    <!--        <div class="xz-2-b"></div>-->
    <!--      </div>-->
    <!--      <div class="xz-3">-->
    <!--        <div class="xz-3-t"></div>-->
    <!--        <div class="item2"></div>-->
    <!--        <div class="xz-3-b"></div>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    <div class="xz2">-->
    <!--      <div class="xz2-1">-->
    <!--        <div class="xz2-1-t"></div>-->
    <!--        <div class="item2"></div>-->
    <!--        <div class="xz2-1-b"></div>-->
    <!--      </div>-->
    <!--      <div class="xz2-2">-->
    <!--        <div class="xz2-2-t"></div>-->
    <!--        <div class="item2"></div>-->
    <!--        <div class="xz2-2-b"></div>-->
    <!--      </div>-->
    <!--      <div class="xz2-3">-->
    <!--        <div class="xz2-3-t"></div>-->
    <!--        <div class="item2"></div>-->
    <!--        <div class="xz2-3-b"></div>-->
    <!--      </div>-->
    <!--    </div>-->
    <div class="cont">
      <div class="top">
        <div class="top-l">
          <div v-for="item in 24" v-bind:key="item.id" class="item">
            <div></div>
          </div>
        </div>
        <div class="top-m">
          <div v-for="item in 4" v-bind:key="item.id" class="react">
            <div></div>
          </div>
          <!--          <div class="react"></div>-->
          <!--          <div class="react"></div>-->
          <!--          <div class="react"></div>-->
          <!--          <div class="react"></div>-->
          <!--          <div class="react"></div>-->
          <!--          <div class="react"></div>-->
        </div>
        <div class="top-r">
          <div v-for="item in 7" v-bind:key="item.id" class="item">
            <div></div>
          </div>
          <!--          <div class="item"></div>-->
          <!--          <div class="item"></div>-->
          <!--          <div class="item"></div>-->
        </div>
      </div>
      <div class="mid-v">
        <div class="mid">
          <!--          <div v-for="(item,index) in 57" :key="index" class="item2"-->
          <!--          >-->
          <!--            <span class="num" ref="numElement"></span>-->
          <!--          </div>-->
          <div v-for="(mouth, index) in traysData.trayMouths" :key="index" class="item2"
               :class="{ 'in-goods': traysData.trayInGoods[index], 'err-status': traysData.trayErrStatus[index] }">
            <span class="num" ref="numElement">{{ mouth }}</span>
          </div>
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
          <!--          <div class="item2"></div>-->
        </div>
      </div>

      <div class="button">
        <div v-for="item in 47" v-bind:key="item.id" class="item3">
          <div></div>
        </div>
        <!--          <div class="item"></div>-->
        <!--          <div class="item"></div>-->
        <!--          <div class="item"></div>-->
        <!--          <div class="item"></div>-->
        <!--          <div class="item"></div>-->
        <!--          <div class="item"></div>-->
        <!--          <div class="item"></div>-->
        <!--          <div class="item"></div>-->
        <!--          <div class="item"></div>-->
        <!--          <div class="item"></div>-->
        <!--          <div class="item"></div>-->
        <!--          <div class="item"></div>-->
        <!--          <div class="item"></div>-->
        <!--          <div class="item"></div>-->
        <!--          <div class="item"></div>-->
        <!--          <div class="item"></div>-->
        <!--          <div class="item"></div>-->
        <!--          <div class="item"></div>-->
        <!--          <div class="item"></div>-->
        <!--          <div class="item"></div>-->
        <!--          <div class="item"></div>-->
        <!--          <div class="item"></div>-->
        <!--          <div class="item"></div>-->
        <!--          <div class="item"></div>-->
        <!--          <div class="item"></div>-->
        <!--          <div class="item"></div>-->
        <!--          <div class="item"></div>-->
        <!--          <div class="item"></div>-->
        <!--          <div class="item"></div>-->
        <!--          <div class="item"></div>-->
      </div>
    </div>

  </div>
</template>

<script setup>

/**
 * 横向拖动触发滚动条拖动
 * container：jquery选择器
 */
function dragMoveX(container) {
  var flag;
  var downX;
  var scrollLeft;
  //鼠标按下
  $(document.body).on("mousedown", container, function (event) {
    console.log('mousedown')
    flag = true;
    downX = event.clientX;
    scrollLeft = $(this).scrollLeft();
  });
  //鼠标移动
  $(document).on("mousemove", function (event) {
    // console.log('mousemove')
    if (flag) {
      var moveX = event.clientX;
      var scrollX = moveX - downX;
      // console.log("moveX" + moveX);
      // console.log("scrollX" + scrollX);
      if (scrollX < 0 && scrollLeft > 0) {
        $(container).scrollLeft(scrollLeft - scrollX)
      } else {
        $(container).scrollLeft(scrollLeft - scrollX)
      }
    }
  });
  //鼠标释放
  $(document).on("mouseup", function () {
    console.log('mouseup')
    flag = false;
  });
  /**
   * 注意：与 mouseout 事件不同，mouseleave 事件只有在鼠标指针离开被选元素时被触发，mouseout 事件在鼠标指针离开任意子元素时也会被触发。参见页面底部演示实例。
   * 所以：如果mouseout的子元素存在溢出，并添加了超出加滚动，那么刚进入也会触发该事件，所以这里就不能使用。
   * */
  //鼠标移出元素
  $(container).on("mouseleave", function (event) {
    console.log('mouseleave')
    flag = false;
    if (event.pageX < 0 || event.pageX > document.body.offsetWidth) {
      console.log("=========" + document.body.offsetWidth)
      console.log("在元素上移出")
      flag = false;
    }
  });
}

dragMoveX(".mid-v")
</script>

<script>

import {defineComponent, ref, watch} from "vue";

export default defineComponent({
  props: {
    traysData: {
      type: Object,
      required: true,
    },
  },

  setup(props) {
    const numElement = ref(null);

    watch(() => [props.trayInGoods, props.trayErrStatus], () => {
      // 索引移动时的处理逻辑
      // 可以在这里更新样式或执行其他操作
    }, {deep: true});

    return {
      numElement,
    };
  },
  mounted() {
  },
  methods: {},
});

</script>

<style scoped lang="scss">
/* eslint-disable */
.body {
  height: 200px;

  .cont {
    padding-top: 135px;
    padding-left: 25px;
  }

  .top {
    display: flex;
    align-items: end;

    .top-l {
      display: grid;
      grid-template-columns: repeat(24, 1fr);
      width: 513.6px;
      height: 40px;
      border: 1px solid lightblue;

      .item {
        border-left: 1px solid lightblue;
        background-color: #265665;
      }
    }

    .top-m {
      position: absolute;
      transform: translate(480px);
      z-index: 2;

      width: 260px;
      height: 40px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .react {
        width: 40px;
        background-color: #076875;
        transform: skewx(-60deg) translate(70px);
      }
    }

    .top-r {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      width: 149.8px;
      height: 40px;
      border: 1px solid lightblue;
      background-color: #265665;
      transform: translate(342.8px);
      z-index: 1;

      .item {
        border-left: 1px solid lightblue;
        background-color: #265665;
      }
    }
  }

  .mid-v {
    width: 1006px;
    overflow-x: scroll;
    overflow-y: hidden;
  }

  .mid-v::-webkit-scrollbar {
    display: none;
  }

  .mid {
    display: grid;
    grid-template-columns: repeat(99, 1fr);
    height: 50px;

    border-top: 2px solid lightblue;
    border-bottom: 2px solid lightblue;
    width: 2119px;

    .item2 {
      width: 21.4px;
      background-color: #22c8de;

      .num {
        width: 17px;
        height: 30px;
        display: inline-block;
        transform: rotate(90deg);
      }
    }

    .in-goods {
      background-color: green;
    }

    .err-status {
      background-color: red;
    }
  }

  .button {
    display: grid;
    grid-template-columns: repeat(47, 1fr);
    width: 1006px;
    height: 40px;
    border: 1px solid lightblue;

    .item3 {
      border-left: 1px solid lightblue;
      background-color: #265665;
    }

  }
}

</style>